<template>
    <div class="aside-div">
        <div class="aside-div" v-if="listData.length > 0">
           <el-card class="box-card">
               <p style="text-align: center;color: #909399;">友情链接</p>
               <el-divider></el-divider>
               <p style="text-align: center;cursor: pointer;" v-for="item in listData" :key="item.id">
                    <span v-if="item.imagesrc !== ''">
                        <a :href="item.links"  target="_blank" style="text-underline: none;">
                            <el-tooltip class="item" effect="light" :content="item.name" placement="top">
                                    <img :src="item.imagesrc" width="220px" />
                            </el-tooltip>
                        </a>
                    </span>
                    <span v-if="item.imagesrc === ''">
                        <el-link type="primary" :href="item.links" target="_blank"><font style="font-size: 20px;">{{item.name}}</font></el-link>
                    </span>
                    <el-divider></el-divider>
               </p>
           </el-card>
        </div>
    </div>
</template>

<script>
    export default{
        data() {
            return {
                listData: [],
            }
        },
        created() {
            this.getWebFriendLinks()
        },
        methods: {
            getWebFriendLinks() {
                const _this = this
                _this.axios.post(_this.$API.ZHIHUAPI.getWebFriendLinks).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.listData = res.data
                        } else {
                            _this.listData = []
                        }
                    } else {
                        _this.listData = []
                    }
                }).catch(() => {
                    _this.listData = []
                })
            },
        }
    }
</script>

<style scoped>

</style>
